<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>寻他</title>
    <script src="./js/flexible.js"></script>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/friends.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/photoswipe.css">
    <link rel="stylesheet" href="./css/default-skin/default-skin.css">
</head>

<body>
    <div class="friends">
        <header class="f-header">
            <a href="javascript:;"><i class="f-arrow"></i></a>
            <h2 class="f-h2">寻他</h2>
        </header>
        <div class="userInfo">
            <div class="head-portrait">
                <i class="bg"></i>
            </div>
            <div class="user-info">
                <span class="userName">回忆的沙漏</span>
                <i class="userPortrait"></i>
            </div>
        </div>

        <div class="contain">
            <ul>
                <li style="padding-bottom:.2rem;">
                    <div class="body">
                        <div class="f-head">
                            <img src="./img/mate1@3x.png">
                        </div>
                        <div class="content">
                            <div class="nickname">铁血军魂</div>
                            <div class="txt">在宇宙中未知的地方有一个由12个人类殖民地组成的星际国家，人类为了方便制造了Cylons（机器人）为人类服务，但Cylons起来反抗人类，双方在血战之后停火，Cylons离开了殖民地去建立自己的家园。40年的和平让
                                <span id="p1">...</span><span id="txt1" style="display:none;">人类放松了警惕，Cylons通过人类内部的间谍瘫痪了人类的防御系统，摧毁了Battlestar舰队，用核武器将殖民地的城市化为灰烬。Battlestar Galactica是唯一一艘幸存的航母，它在舰长Adama的指挥下带领几十艘各式各样的民船和近5万名幸存者逃离了殖民地的行星系统，开始了寻找人类的第13个殖民地——地球——的旅程。</span></div>
                            <div style="color: #88B1C5;" onclick="more(this,'1')">全文</div>
                            <div class="my-gallery" data-pswp-uid="1">
                                <figure><span>
							  <a href="./img/Bookstore@3x.png" data-size="795x255">
							  <img style="width:5.3rem;" src="./img/Bookstore@3x.png">
							  </a></span>
                                </figure>
                            </div>
                            <div class="tm">
                                <div class="fl">1分钟前</div>
                                <div class="fr" style="width:2.32rem;"><i class="iconfont icon-Pingjia">&nbsp;点赞</i><i class="iconfont icon-pinglun">&nbsp;评论</i></div>
                            </div>
                            <div class="cmt">
                                <div class="fav line"><i class="iconfont icon-Pingjia"></i>小豪,李小爱</div>
                                <div class="say"><span>小豪：</span>什么</div>
                                <div class="say"><span>淘淘：</span>I use owl carousel to generate a slider, but at the same time I want to use
                                    Photoswipe, but I can't. When I use the Owl carousel plugin, the slider's inserted into
                                    the code with a speciel markup, where each item (image) has a class of .item and the
                                    image is located 3 layers deep into that div.</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li style="padding-bottom:.2rem;">
                    <div class="body">
                        <div class="f-head">
                            <img src="./img/mate2@3x.png">
                        </div>
                        <div class="content">
                            <div class="nickname">颜值担当</div>
                            <div class="txt">老火锅，嗨起来</div>
                            <div class="my-gallery" data-pswp-uid="2">
                                <figure>
                                    <div style="width:1.7rem;height:1.7rem;"><a href="img/hot1.png" data-size="640x426"><img style="height:100%;" src="img/hot1.png"></a></div>
                                    <figcaption style="display:none;">在这里可增加图片描述</figcaption>
                                </figure>
                                <figure>
                                    <div style="width:1.7rem;height:1.7rem;"><a href="img/hot2.png" data-size="640x426"><img style="height:100%;" src="img/hot2.png"></a></div>
                                    <figcaption style="display:none;">在这里可增加图片描述2</figcaption>
                                </figure>
                            </div>
                            <div class="tm">
                                <div class="fl">30分钟前</div>
                                <div class="fr" style="width:2.32rem;"><i class="iconfont icon-Pingjia">&nbsp;点赞</i><i class="iconfont icon-pinglun">&nbsp; 评论</i></div>
                            </div>
                            <div class="cmt">
                                <div class="fav line"><i class="iconfont icon-Pingjia"></i>ANTHONY,☆Sanly☆</div>
                                <div class="say"><span>ANTHONY：</span>哇，看上去好好吃</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li style="padding-bottom:.2rem;">
                    <div class="body">
                        <div class="f-head">
                            <img src="./img/mate3@3x.png">
                        </div>
                        <div class="content">
                            <div class="nickname">关家小姐姐</div>
                            <div class="txt">甜甜的 香香的 和好心情更配哦</div>
                            <div class="my-gallery" data-pswp-uid="3">
                                <figure>
                                    <div style="width:1.7rem;height:1.7rem;"><a href="./img/zhuyantu02@3x.png" data-size="640x426"><img style="height:100%;" src="./img/zhuyantu02@3x.png"></a></div>
                                    <figcaption style="display:none;">在这里可增加图片描述</figcaption>
                                </figure>
                                <figure>
                                    <div style="width:1.7rem;height:1.7rem;"><a href="./img/zhuyantu03@3x.png" data-size="640x426"><img style="height:100%;" src="./img/zhuyantu03@3x.png"></a></div>
                                    <figcaption style="display:none;">在这里可增加图片描述2</figcaption>
                                </figure>
                                <figure>
                                    <div style="width:1.7rem;height:1.7rem;"><a href="./img/zhuyantu02@3x.png" data-size="640x426"><img style="height:100%;" src="./img/zhuyantu02@3x.png"></a></div>
                                    <figcaption style="display:none;">在这里可增加图片描述2</figcaption>
                                </figure>
                            </div>
                            <div class="tm">
                                <div class="fl">30分钟前</div>
                                <div class="fr" style="width:2.32rem;"><i class="iconfont icon-Pingjia">&nbsp;点赞</i><i class="iconfont icon-pinglun">&nbsp; 评论</i></div>
                            </div>
                            <div class="cmt">
                                <div class="fav line"><i class="iconfont icon-Pingjia"></i>ANTHONY,☆Sanly☆</div>
                                <div class="say"><span>ANTHONY：</span>哇，看上去好好吃</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li style="padding-bottom:.2rem;">
                    <div class="body">
                        <div class="f-head">
                            <img src="./img/mate2@3x.png">
                        </div>
                        <div class="content">
                            <div class="nickname">颜值担当</div>
                            <div class="txt">难得有闲，逛逛校园...</div>
                            <div class="my-gallery" data-pswp-uid="4">
                                <figure>
                                    <div style="width:1.7rem;height:1.7rem;"><a href="./img/zhangsandt01@3x.png" data-size="640x426"><img style="height:100%;" src="./img/zhangsandt01@3x.png"></a></div>
                                    <figcaption style="display:none;">在这里可增加图片描述</figcaption>
                                </figure>
                                <figure>
                                    <div style="width:1.7rem;height:1.7rem;"><a href="./img/zhangsandt02@3x.png" data-size="640x426"><img style="height:100%;" src="./img/zhangsandt02@3x.png"></a></div>
                                    <figcaption style="display:none;">在这里可增加图片描述2</figcaption>
                                </figure>
                                <figure>
                                    <div style="width:1.7rem;height:1.7rem;"><a href="./img/zhangsandt03@3x.png" data-size="640x426"><img style="height:100%;" src="./img/zhangsandt03@3x.png"></a></div>
                                    <figcaption style="display:none;">在这里可增加图片描述2</figcaption>
                                </figure>
                                <figure>
                                    <div style="width:1.7rem;height:1.7rem;"><a href="./img/zhangsandt04@3x.png" data-size="640x426"><img style="height:100%;" src="./img/zhangsandt04@3x.png"></a></div>
                                    <figcaption style="display:none;">在这里可增加图片描述2</figcaption>
                                </figure>
                            </div>
                            <div class="tm">
                                <div class="fl">30分钟前</div>
                                <div class="fr" style="width:2.32rem;"><i class="iconfont icon-Pingjia">&nbsp;点赞</i><i class="iconfont icon-pinglun">&nbsp; 评论</i></div>
                            </div>
                            <div class="cmt">
                                <div class="fav line"><i class="iconfont icon-Pingjia"></i>ANTHONY,☆Sanly☆</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li style="padding-bottom:.2rem;">
                    <div class="body">
                        <div class="f-head">
                            <img src="./img/mate3@3x.png">
                        </div>
                        <div class="content">
                            <div class="nickname">关家小姐姐</div>
                            <div class="txt">看我家阿呆即兴表演</div>
                            <div id="div" class="move"><i class="iconfont icon-bofang" id="iconfont"></i>
                                <video src="./img/m.mp4" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-orientation="h5"
                                    x5-video-player-fullscreen="true" preload="auto" style="object-fit:fill;" id="video_test">
                                </video>
                                <i id="endBtn" class="iconfont icon-bofang"></i>
                            </div>
                            <div class="tm">
                                <div class="fl">30分钟前</div>
                                <div class="fr" style="width:2.32rem;"><i class="iconfont icon-Pingjia">&nbsp;点赞</i><i class="iconfont icon-pinglun">&nbsp; 评论</i></div>
                            </div>
                            <div class="cmt">
                                <div class="fav line"><i class="iconfont icon-Pingjia"></i>ANTHONY,☆Sanly☆</div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <!-- photoswipe必须 -->
        <!-- Root element of PhotoSwipe. Must have class pswp. -->
        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

            <!-- Background of PhotoSwipe. 
             It's a separate element as animating opacity is faster than rgba(). -->
            <div class="pswp__bg"></div>

            <!-- Slides wrapper with overflow:hidden. -->
            <div class="pswp__scroll-wrap">

                <!-- Container that holds slides. 
                PhotoSwipe keeps only 3 of them in the DOM to save memory.
                Don't modify these 3 pswp__item elements, data is added later on. -->
                <div class="pswp__container">
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                </div>

                <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
                <div class="pswp__ui pswp__ui--hidden">

                    <div class="pswp__top-bar">

                        <!--  Controls are self-explanatory. Order can be changed. -->

                        <div class="pswp__counter"></div>

                        <button class="pswp__button pswp__button--close iconfont icon-quxiao" title="Close (Esc)"></button>

                        <button class="pswp__button pswp__button--share iconfont icon-fenxiang" title="Share"></button>

                        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                        <!-- element will get class pswp__preloader--active when preloader is running -->
                        <div class="pswp__preloader">
                            <div class="pswp__preloader__icn">
                                <div class="pswp__preloader__cut">
                                    <div class="pswp__preloader__donut"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                        <div class="pswp__share-tooltip"></div>
                    </div>

                    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                </button>

                    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                </button>

                    <div class="pswp__caption">
                        <div class="pswp__caption__center"></div>
                    </div>

                </div>

            </div>

        </div>

        <script src="js/jquery.min.js"></script>
        <script src="js/photoswipe.js"></script>
        <script src="js/photoswipe-ui-default.min.js"></script>
        <script type="text/javascript">
            var initPhotoSwipeFromDOM = function (gallerySelector) {

                // 解析来自DOM元素幻灯片数据（URL，标题，大小...）
                // (children of gallerySelector)
                var parseThumbnailElements = function (el) {
                    var thumbElements = el.childNodes,
                        numNodes = thumbElements.length,
                        items = [],
                        figureEl,
                        linkEl,
                        size,
                        item,
                        divEl;

                    for (var i = 0; i < numNodes; i++) {

                        figureEl = thumbElements[i]; // <figure> element

                        // 仅包括元素节点
                        if (figureEl.nodeType !== 1) {
                            continue;
                        }
                        divEl = figureEl.children[0];
                        linkEl = divEl.children[0]; // <a> element

                        size = linkEl.getAttribute('data-size').split('x');

                        // 创建幻灯片对象
                        item = {
                            src: linkEl.getAttribute('href'),
                            w: parseInt(size[0], 10),
                            h: parseInt(size[1], 10)
                        };



                        if (figureEl.children.length > 1) {
                            // <figcaption> content
                            item.title = figureEl.children[1].innerHTML;
                        }

                        if (linkEl.children.length > 0) {
                            // <img> 缩略图节点, 检索缩略图网址
                            item.msrc = linkEl.children[0].getAttribute('src');
                        }

                        item.el = figureEl; // 保存链接元素 for getThumbBoundsFn
                        items.push(item);
                    }

                    return items;
                };

                // 查找最近的父节点
                var closest = function closest(el, fn) {
                    return el && (fn(el) ? el : closest(el.parentNode, fn));
                };

                // 当用户点击缩略图触发
                var onThumbnailsClick = function (e) {
                    e = e || window.event;
                    e.preventDefault ? e.preventDefault() : e.returnValue = false;

                    var eTarget = e.target || e.srcElement;

                    // find root element of slide
                    var clickedListItem = closest(eTarget, function (el) {
                        return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
                    });

                    if (!clickedListItem) {
                        return;
                    }

                    // find index of clicked item by looping through all child nodes
                    // alternatively, you may define index via data- attribute
                    var clickedGallery = clickedListItem.parentNode,
                        childNodes = clickedListItem.parentNode.childNodes,
                        numChildNodes = childNodes.length,
                        nodeIndex = 0,
                        index;

                    for (var i = 0; i < numChildNodes; i++) {
                        if (childNodes[i].nodeType !== 1) {
                            continue;
                        }

                        if (childNodes[i] === clickedListItem) {
                            index = nodeIndex;
                            break;
                        }
                        nodeIndex++;
                    }



                    if (index >= 0) {
                        // open PhotoSwipe if valid index found
                        openPhotoSwipe(index, clickedGallery);
                    }
                    return false;
                };

                // parse picture index and gallery index from URL (#&pid=1&gid=2)
                var photoswipeParseHash = function () {
                    var hash = window.location.hash.substring(1),
                        params = {};

                    if (hash.length < 5) {
                        return params;
                    }

                    var vars = hash.split('&');
                    for (var i = 0; i < vars.length; i++) {
                        if (!vars[i]) {
                            continue;
                        }
                        var pair = vars[i].split('=');
                        if (pair.length < 2) {
                            continue;
                        }
                        params[pair[0]] = pair[1];
                    }

                    if (params.gid) {
                        params.gid = parseInt(params.gid, 10);
                    }

                    return params;
                };

                var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
                    var pswpElement = document.querySelectorAll('.pswp')[0],
                        gallery,
                        options,
                        items;

                    items = parseThumbnailElements(galleryElement);

                    // 这里可以定义参数
                    options = {
                        barsSize: {
                            top: 100,
                            bottom: 100
                        },
                        fullscreenEl: false,
                        shareButtons: [{
                                id: 'wechat',
                                label: '分享微信',
                                url: '#'
                            },
                            {
                                id: 'weibo',
                                label: '新浪微博',
                                url: '#'
                            },
                            {
                                id: 'download',
                                label: '保存图片',
                                url: '{{raw_image_url}}',
                                download: true
                            }
                        ],

                        // define gallery index (for URL)
                        galleryUID: galleryElement.getAttribute('data-pswp-uid'),

                        getThumbBoundsFn: function (index) {
                            // See Options -> getThumbBoundsFn section of documentation for more info
                            var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                                pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                                rect = thumbnail.getBoundingClientRect();

                            return {
                                x: rect.left,
                                y: rect.top + pageYScroll,
                                w: rect.width
                            };
                        }

                    };

                    // PhotoSwipe opened from URL
                    if (fromURL) {
                        if (options.galleryPIDs) {
                            // parse real index when custom PIDs are used 
                            for (var j = 0; j < items.length; j++) {
                                if (items[j].pid == index) {
                                    options.index = j;
                                    break;
                                }
                            }
                        } else {
                            // in URL indexes start from 1
                            options.index = parseInt(index, 10) - 1;
                        }
                    } else {
                        options.index = parseInt(index, 10);
                    }

                    // exit if index not found
                    if (isNaN(options.index)) {
                        return;
                    }

                    if (disableAnimation) {
                        options.showAnimationDuration = 0;
                    }

                    // Pass data to PhotoSwipe and initialize it
                    gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
                    gallery.init();
                };

                // loop through all gallery elements and bind events
                var galleryElements = document.querySelectorAll(gallerySelector);

                for (var i = 0, l = galleryElements.length; i < l; i++) {
                    galleryElements[i].setAttribute('data-pswp-uid', i + 1);
                    galleryElements[i].onclick = onThumbnailsClick;
                }

                // Parse URL and open gallery if it contains #&pid=3&gid=1
                var hashData = photoswipeParseHash();
                if (hashData.pid && hashData.gid) {
                    openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
                }
            };

            // execute above function
            initPhotoSwipeFromDOM('.my-gallery');


            $(".my-gallery>figure>div").each(function () {
                $(this).height($(this).width());
            });

            function more(obj, id) {
                if ($('#txt' + id).is(":hidden")) {
                    $('#p' + id).hide();
                    $('#txt' + id).show();
                    obj.innerHTML = '收起';
                } else {
                    $('#p' + id).show();
                    $('#txt' + id).hide();
                    obj.innerHTML = '全文';
                }
            }
            var _video = document.getElementById("video_test");
            // _video.play();
            var div = document.getElementById("div");
            var icon = document.getElementById("iconfont");
            var endBtn = document.getElementById("endBtn");

            div.ontouchend = div.onclick = function () {
                this.classList.add('move')
                _video.play();
                icon.style.display = "none"
                endBtn.style.display = "none";
            }
            endBtn.ontouchend = endBtn.onclick = function () {
                this.classList.remove('move')
                icon.style.display = "block";
                endBtn.style.display = "block";
                _video.play()
            }
            _video.addEventListener('ended', function () {
                endBtn.classList.add('move');
                icon.style.display = "block";
            })
        </script>
    </div>
</body>

</html>